<template>
  <div>
    <template>
        <el-table
          :data="searchList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @selection-change="handleSelectionChange"
          header-align="center"
          >
          <el-table-column
            type="selection"
            align="center"
            width="50"></el-table-column>
          <el-table-column
            prop="user_id"
            label="编号"
            align="center"
            :width="50"></el-table-column>
            <el-table-column
            prop="user_name"
            label="姓名"
            align="center"
            :width="100"></el-table-column>
            <el-table-column
            prop="user_cardId"
            label="身份证号"
            width="200"
            align="center"></el-table-column>
            <el-table-column
            prop="user_phone"
            label="手机号码"
            width="150"
            align="center"></el-table-column>
            <el-table-column
            prop="home_sign_state"
            label="签约状态"
            :formatter="serviceBao"
            align="center"
            :width="80"></el-table-column>
            <el-table-column
            prop="lableName"
            label="用户标签"
            align="center"
            :formatter="userLable"
            :width="120">
            <template slot-scope="scope">
            <little-lable>
                <template>
                  {{ scope.row.lableName }}
                </template>
              </little-lable>
            </template>
            </el-table-column>
            <el-table-column
            prop=""
            label="居民状态"
            align="center"
            :width="80">
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-table-column>
            <el-table-column
            prop="day06"
            label="操作"
            align="center"
            :width="290">
            <template slot-scope="scope">
            <!-- <router-link to="" class="rlink">查看详情</router-link> -->
            <!-- <router-link to="/perfectPeople" class="rlink">编辑</router-link> -->
            <el-button
              type="text"
              size="small"
              style="font-size:13px;"
              @click="searchXq(scope.row)"
            >
            查看详情
            </el-button>
            <el-button
              type="text"
              size="small"
              style="font-size:13px;"
              @click="editFn(scope.row)"
            >
              编辑
            </el-button>
            <!-- <router-link to="" class="rlink">发消息</router-link> -->
            <el-button
              type="text"
              size="small"
              style="font-size:13px;"
              @click="toMsg(scope.row)"
            >
              发消息
            </el-button>
            <!-- <router-link to="" class="rlink">添加服务</router-link> -->
            <el-button
              type="text"
              size="small"
              style="font-size:13px;"
              @click="addServeFn(scope.row)"
            >
              添加服务
            </el-button>
            <!-- <router-link to="" class="rlink">删除</router-link>
             -->
            <el-button
              type="text"
              size="small"
              style="font-size:13px;"
              class="delbtn"
              @click="delFn(scope.row)"
            >
              删除
            </el-button>
            </template>
            </el-table-column>
        </el-table>
      </template>
      <div id="page">
        <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 10, 40, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchList.length"
          >
          </el-pagination>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import LittleLable from '../lable/LittleLable.vue'
axios.defaults.baseURL = "http://localhost:8080"

export default {
  components: { LittleLable },
  created(){
    this.tableLoad()
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页的数据条数
      searchList:[],
      value:true,
      lableName:""
    }
  },
  methods:{
     handleSelectionChange(val) {
        this.multipleSelection = val;
     },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
      serviceBao(row, column, cellValue, index) {
        if (cellValue === 1) {
          return <font color="#75D4A7">待签约</font>;
        } else if (cellValue === 2) {
          return <font color="#FA746B">签约中</font>;
        } else if (cellValue === 3) {
          return <font color="#FDDB78">已完成</font>;
        }
      },
      userLable(row, column, cellValue, index){
        return null
      },
      tableRowClassName({row, rowIndex}){
        if (rowIndex%2==0) {
          return 'warning-row';
        } else if (rowIndex%2!=0) {
          return 'success-row';
        }
        return '';
      },
      tableLoad(){
        axios({
          url:"/sign/getAllPeople",
          method:"get"
        }).then((res) =>{
          this.searchList = res.data
        })
      },
      editFn(row){
        this.$router.push({
          path:"/perfectPeople",
          query:{
            id:row.user_id
          }
        })
      },
      searchXq(row){
        this.$router.push({
          path:"/searchXq",
          query:{
            id:row.user_id
          }
        })
      },
      delFn(row){
        axios({
          url:"/sign/delPeopById",
          method:"get",
          params:{
            id:row.user_id
          }
        }).then(res =>{
          this.tableLoad()
          this.$message({
            message: '删除成功！！！',
            type: 'success'
          });

        })
      },
      addServeFn(row){
        this.$router.push({
          path:"/serve08",
          query:{
            id:row.user_id,
            name:row.user_name
          }
        })
      },
      toMsg(row){
        this.$router.push({
          path:"/message",
          query:{
            id:row.user_id,
            name:row.user_name
          }
        })
      }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: white;
  }

  .el-table .success-row {
    background: #F2F7FB;
  }

  #page{
    display: flex;
    justify-content:center;
    margin-top: 20px;
  }
  .rlink{
    font-size: 13px;
    margin-left: 10px;
    color: #2983F6;
  }
  .rlink:nth-child(5){
    color: #FA746B;
  }
  .delbtn{
    color: rgb(253, 74, 74);
  }
</style>